<template>
  <div class="my">
    <!-- 头部组价 -->
    <top-module bgColor="#FF8E96">
      <div slot="center" class="title">
        商城
      </div>
    </top-module>
    <!-- 去登陆 -->
    <div class="logAndReg">
      <div class="user">
        <img src="/img/user/user.jpg" alt="">
      </div>
      <div class="logAndReg_txt">
        <p>登录/注册</p>
        <p><img src="/img/user/phone.png" alt=""><span>暂无绑定手机号</span></p>
      </div>
      <div class="arrows">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 余额优惠积分 -->
    <ul class="my_money">
      <li>
        <p><span>0.00</span>元</p>
        <p>我的余额</p>
      </li>
      <li>
        <p><span>0</span>个</p>
        <p>我的优惠</p>
      </li>
      <li>
        <p><span>0</span>分</p>
        <p>我的积分</p>
      </li>
    </ul>
    <!-- 信息 -->
    <ul class="my_informa">
      <li>
        <div>
          <img src="/img/user/msg.png" alt="">
        </div>
        <p>我的消息</p>
      </li>
      <li>
        <div>
          <img src="/img/user/banlance.png" alt="">
        </div>
        <p>积分商城</p>
      </li>
      <li>
        <div>
          <img src="/img/user/member.png" alt="">
        </div>
        <p class="member">会员卡</p>
      </li>
    </ul>
    <!-- 我的购物车 -->
    <ul class="APP">
      <li>
        <div>
          <img src="/img/user/car.png" alt="">
        </div>
        <p>我的购物车</p>
      </li>
      <li>
        <div>
          <van-icon name="gift" />
        </div>
        <p>下载购物APP</p>
      </li>
    </ul>
    <!-- 底部组件 -->
    <bottom-module></bottom-module>
  </div>
</template>

<script>
//引入组件
import bottomModule from "../components/commonality/bottomModule.vue"; //底部
import TopModule from "../components/commonality/topModule.vue"; //头部
export default {
  components: { bottomModule, TopModule },
  name: "My",
};
</script>

<style lang="scss" scoped>
.my {
  width: 100%;
  .title {
    text-align: center;
    font-size: 19px;
    line-height: 50px;
    color: #fff;
  }
  .logAndReg {
    display: flex;
    margin-top: 50px;
    height: 100px;
    background: #ff8e96;
    color: #fff;
    .user {
      flex: 3;
      text-align: center;
      padding-top: 13px;
      img {
        width: 65%;
      }
    }
    .logAndReg_txt {
      flex: 7;
      font-size: 18px;
      padding-top: 24px;
      p {
        img {
          width: 23px;
          vertical-align: middle;
        }
      }
    }
    .arrows {
      flex: 2;
      line-height: 120px;
      text-align: center;
      .van-icon {
        font-size: 35px;
      }
    }
  }
  // 余额
  .my_money {
    width: 100%;
    display: flex;
    border-bottom: 15px solid rgb(233, 233, 233);
    text-align: center;
    li {
      flex: 1;
      border-right: solid 1px rgb(233, 233, 233);
      padding: 20px 0;
      font-size: 14px;
      span {
        color: #ff6433;
        font-size: 30px;
        font-weight: 700;
      }
    }
  }
  // 信息
  .my_informa {
    width: 100%;
    border-bottom: 15px solid rgb(233, 233, 233);
    li {
      display: flex;
      div {
        flex: 1;
        padding: 8px 10px;
        img {
          width: 80%;
        }
      }
      p {
        flex: 9;
        border-bottom: solid #ccc 1px;
        font-size: 19px;
        line-height: 50px;
      }
      .member {
        border-bottom: none;
      }
    }
  }
  // 购物车下载App
  .APP {
    width: 100%;
    li {
      width: 100%;
      display: flex;
      div {
        flex: 1;
        padding: 8px 10px;
        img{
          width: 80%;
        }
        .van-icon{
          color: #FF72A2;
          font-size: 27px;
        }
      }
      p {
        flex: 9;
        border-bottom: solid #ccc 1px;
        font-size: 19px;
        line-height: 50px;
      }
    }
  }
}
</style>